import { useMemo, useCallback, useEffect } from 'react'
import { View, KeyboardAvoidingView, useWindowDimensions } from 'react-native'
import Modal from 'react-native-modal'
import { createStyles, useStyles } from '@mf2e/react-native-theme-styles'
import mnb from '@mf2e/mnb'
import useAppStore from '@/store/modules/app'
import useDialog, { DialogContext } from '@/uses/useDialog'

const BaseDialog = ({ style, children, position = 'center', maskClose = true, ...otherProps }) => {
  const styles = useStyles(themeStyles)

  const { width, height } = useWindowDimensions()

  const { dialogConfig, closeDialog } = useAppStore()
  const { scrollOffset, scrollTo, scrollRef, onScroll } = useDialog()

  const modalProps = useMemo(() => {
    switch (position) {
      case 'center':
        return {
          animationIn: {
            from: {
              opacity: 0,
              scale: 0.8,
            },
            to: {
              opacity: 1,
              scale: 1,
            },
          },
          animationOut: {
            from: {
              opacity: 1,
              scale: 1,
            },
            to: {
              opacity: 0,
              scale: 0.8,
            },
          },
        }
      case 'bottom':
        return {
          animationIn: 'slideInUp',
          animationOut: 'slideOutDown',
          swipeDirection: 'down',
          onSwipeComplete: closeDialog,
          useNativeDriver: false,
          scrollTo,
          scrollOffset,
          scrollOffsetMax: Infinity,
        }
    }
  }, [position, closeDialog, scrollOffset, scrollTo])

  const onBackdropPress = useCallback(() => {
    maskClose && closeDialog()
  }, [maskClose, closeDialog])

  useEffect(() => {
    // iOS底部弹窗手势冲突修正
    if (position === 'bottom') {
      mnb('app.gestureSimultaneous', { enable: true })
      return () => mnb('app.gestureSimultaneous', { enable: false })
    }
  })

  return (
    <Modal
      style={styles.BaseDialog}
      isVisible={dialogConfig.dialog && !dialogConfig.closing}
      backdropColor={styles.BaseDialog.backdropColor}
      backdropOpacity={1}
      coverScreen={false}
      useNativeDriver={true}
      useNativeDriverForBackdrop={true}
      hideModalContentWhileAnimating={true}
      propagateSwipe={true}
      statusBarTranslucent={true}
      deviceWidth={width}
      deviceHeight={height}
      onBackdropPress={onBackdropPress}
      onBackButtonPress={closeDialog}
      {...modalProps}
      {...otherProps}
    >
      <DialogContext.Provider value={{ scrollOffset, scrollTo, scrollRef, onScroll }}>
        <KeyboardAvoidingView style={[styles.container, styles[position]]} behavior="padding">
          <View style={style}>{children}</View>
        </KeyboardAvoidingView>
      </DialogContext.Provider>
    </Modal>
  )
}

const themeStyles = createStyles({
  BaseDialog: {
    flex: 1,
    flexDirection: 'row',
    margin: 0,
    backdropColor: 'rgba(0, 0, 0, 0.6)',
  },
  container: {
    alignItems: 'center',
    width: '100%',
  },
  center: {
    alignSelf: 'center',
  },
  bottom: {
    alignSelf: 'flex-end',
  },
})

export default BaseDialog
